<template>
  <div style="max-width: 720px; margin: 40px auto">
    <h2>CSRF 攻击与防御实验室</h2>
    <!-- 受害站账户余额 -->
    <div style="margin: 24px 0">
      <h3>受害账户信息</h3>
      <el-descriptions :column="2">
        <el-descriptions-item label="账户名">userA</el-descriptions-item>
        <el-descriptions-item label="余额"
          >{{ balance }} 元</el-descriptions-item
        >
      </el-descriptions>
    </div>

    <!-- 受害站正常转账按钮 -->
    <div style="margin: 24px 0">
      <h3>受害站 - 正常转账操作</h3>
      <el-button type="primary" @click="doTransfer">转账 100 元</el-button>
      <span v-if="transferMsg" style="margin-left: 18px; color: #67c23a">{{
        transferMsg
      }}</span>
    </div>

    <!-- CSRF 攻击 iframe 区 -->
    <div style="margin: 24px 0">
      <h3>模拟攻击站点</h3>
      <iframe
        ref="attackerFrame"
        :src="attackerPageUrl"
        width="480"
        height="120"
        style="border: 1px solid #ccc"
      ></iframe>
      <div style="font-size: 12px; color: #999; margin-top: 8px">
        这是恶意网站上的隐藏表单/图片，用户只要访问，浏览器就会自动携带受害站Cookie，触发危险操作。
      </div>
    </div>

    <!-- 防御手段切换 -->
    <div style="margin: 24px 0">
      <h3>防御机制演示</h3>
      <el-checkbox v-model="enableToken">校验 CSRF Token</el-checkbox>
      <el-checkbox v-model="enableSameSite" style="margin-left: 12px"
        >Cookie SameSite=Strict</el-checkbox
      >
      <el-checkbox v-model="enableReferer" style="margin-left: 12px"
        >校验 Referer</el-checkbox
      >
      <div style="margin: 8px 0; color: #888; font-size: 13px">
        可切换不同防御手段后用 iframe 发起攻击试验！
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import axios from "axios";

const balance = ref(1000);
const transferMsg = ref("");
const enableToken = ref(true);
const enableSameSite = ref(false);
const enableReferer = ref(false);

function doTransfer() {
  axios
    .post(
      "/api/transfer/transfer",
      { amount: 100 },
      {
        headers: {
          "x-csrf-token": enableToken.value ? "mock-csrf-token" : undefined,
        },
        withCredentials: true,
      }
    )
    .then((res) => {
      if (res.data.success) {
        balance.value = res.data.balance;
        transferMsg.value = "转账成功";
      } else {
        transferMsg.value = res.data.msg;
      }
    });
}

// 动态生成攻击站点页面（用 DataURL 或本地简单页面）
const attackerPageUrl = ref("");

function utf8ToBase64(str) {
  return window.btoa(unescape(encodeURIComponent(str)));
}
function updateAttackerPage() {
  // 模拟“跨域隐藏表单自动提交”攻击
  const formAttack =
    `
    <form action="http://localhost:3000/api/transfer/transfer" method="POST" target="_self">
      <input type="hidden" name="amount" value="100" />
      <input type="hidden" name="csrfToken" value="" />
      <button style="display:none">提交</button>
    </form>
    <script>document.forms[0].submit()<` +
    `/script>
  `;
  attackerPageUrl.value =
    "data:text/html;base64," + utf8ToBase64(formAttack) + "#" + Date.now();
}
watch([enableToken, enableSameSite, enableReferer], updateAttackerPage, {
  immediate: true,
});
</script>
